<template>
  <div class="details-view">
    <!-- 顶部导航 -->
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #title>
        <span>商品详情</span>
      </template>
    </van-nav-bar>

    <!-- 商品轮播图 -->
    <van-swipe class="swipe">
      <van-swipe-item v-for="image in product.imgs" :key="image">
        <img :src="image" alt="" class="swipe-image" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>

    <!-- 商品名称价格等信息-->
    <div class="details-info">
      <div class="details-top">
        <div class="details-price">
          <span>￥ {{ product.newPrice }}</span>
          <span>{{ product.oldPrice }}</span>
        </div>
        <div class="details-name">
          <span>品牌自营</span>
        </div>
      </div>
      <div class="details-bottom">
        <div class="details-title">
          <div class="details-title-text">
            <span>{{ product.name }}</span>
          </div>
          <div class="details-line">
            <span>已售{{product.sales}}件</span>
            <span><van-icon name="gem" /> 商城尊享</span>
          </div>
        </div>
        <!-- 横线 -->
        <div class="line"></div>

        <!-- 底部按钮 -->
        <div class="details-button">
          <!-- 分享和收藏 -->
          <van-button plain size="small" class="details-button-analysis"
            @click="showShare=true">
            <van-icon name="share-o" />
            <span>分享</span>
          </van-button>
          <!-- 竖线 -->
          <div class="line-vertical"></div>
          <van-button plain size="small" class="details-button-collection"
            @click="collect">
            <van-icon name="star-o" :color="isCollect?'#4fc08d':'black'" />
            <span :style="{color:isCollect?'#4fc08d':''}">{{ isCollect?'已收藏':'收藏' }}</span>
          </van-button>
        </div>
      </div>
    </div>

    <!-- 选择品类等组件 -->
    <div class="details-content-select">
      <van-cell-group inset>
        <van-cell title="选择" is-link label="已选:预留格式1" @click="showBottom1 = true" />
        <van-cell title="参数" is-link label="生产日期 品牌..." @click="showBottom2 = true" />
      </van-cell-group>
      <div class="details-content-select-bottom">
        <div class="details-content-select-bottom-top">
          <span><van-icon name="passed" color="#07c160" /> 正品保障</span>
          <span><van-icon name="passed" color="#07c160" /> 可配送全国(部分地区不支持)</span>
        </div>
        <div class="details-content-select-bottom-bottom">
          <span
            ><van-icon name="passed" color="#07c160" /> 7天无理由退货(一次性包装破损不支持)</span
          >
        </div>
      </div>
    </div>
    <!-- 详情部分,主体为一个超长图片 -->
    <div class="details-content-img">
      <div class="details-content-img-top">
        <!--左侧有竖线-->
        <div class="details-content-img-top-left">详情</div>
      </div>
      <div class="details-content-img-bottom">
        <img v-for="(src, index) in product.imgs" :key="index" :src="src" alt="" />
      </div>
    </div>

    <!-- 底部说明部分 -->
    <div class="details-content-explain">
      <div class="details-content-explain-top">
        划线价格:指商品的专柜价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。
      </div>
      <div class="details-content-explain-center">
        未划线价格:指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，
        或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
      </div>
      <div class="details-content-explain-bottom">
        折扣:如无特殊说明，折扣指在原价、或划线价(如品牌专柜标价、厂商指导价、厂商建议零售价)
        等某一价格基础上计算出的优惠比例或优惠金额;如有疑问，您可在购买前联系客服进行咨询。
      </div>
    </div>


    
    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="showShare"
      title="分享给"
      :options="options"
      @select="onSelect"
    />

    <!-- 选择对应的圆角底部弹窗 -->
    <!-- 圆角弹窗（底部） -->
    <van-popup
      v-model:show="showBottom1"
      round
      position="bottom"
      :style="{ height: '90%' }"
      :overlay="false"
      closeable
    >
      <div class="popup-bottom1">
        <div class="popup-bottom1-title">
          <img :src="product.img" alt="" width="100px" />
          <span>￥ {{ product.newPrice }}</span>
        </div>
        <div class="popup-bottom1-title-text">规格</div>
        <div class="popup-bottom1-select">
          <div :class="select===item?'active':''" 
          v-for="(item, index) in product.spec" :key="index"
          @click="select=item"
          >{{ item }}</div>
        </div>
        <div class="popup-bottom1-title-text">数量</div>
        <div class="popup-bottom1-num">
          <span>有货</span>
          <van-stepper v-model="num" :min="1" :max="10" />
        </div>

        <div class="popup-bottom1-btn">
          <van-action-bar>
            <van-action-bar-button type="warning" text="加入购物车" />
            <van-action-bar-button type="danger" text="立即购买" />
          </van-action-bar>
        </div>
      </div>
    </van-popup>

    <!-- 参数对应的圆角底部弹窗 -->
    <van-popup
      v-model:show="showBottom2"
      round
      position="bottom"
      :style="{ height: '90%' }"
      :overlay="false"
      closeable
    >
      <div class="popup-bottom2">
        <div class="popup-bottom2-title">
          <span>产品参数</span>
        </div>
        <div class="popup-bottom2-item" v-for="(item, index) in paramsArr" :key="index">
          <span>{{ item?.name }}</span>
          <span>{{ item?.value }}</span>
        </div>

        <div class="popup-bottom2-btn">
          <van-button type="success" size="large" @click="showBottom2 = false">确定</van-button>
        </div>
      </div>
    </van-popup>

    <!-- 底部提交组件 -->
    <van-action-bar>
      <van-action-bar-icon icon="service-o" text="客服" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="goCart" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addCart1" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
    
    <!-- 提示组件 -->
    <van-toast v-model:show="show" style="padding: 5px 10px">
      <template #message>
        {{ message }}
      </template>
    </van-toast>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { useCartStore } from '@/stores'
import { showToast } from 'vant'
import axios from 'axios'
const show = ref(false)
const message = ref('')
// import html2canvas from 'html2canvas';

const router = useRouter()
const route = useRoute()
const { addCart } = useCartStore()

//参数信息对象
const params = ref({
  date: '2098年05月06日 至 2098年05月08日',
  barnd: '小默制药',
  cate: '铁皮石斛',
  package: '礼盒装',
  sign: '保健食品(食健字)',
  isSugar: '加糖'
})
//转化成数组
let paramsArr = Object.entries(params.value).map(([key, value]) => {
  if (key === 'date') {
    return {
      name: '生产日期',
      value
    }
  } else if (key === 'barnd') {
    return {
      name: '生产厂商',
      value
    }
  } else if (key === 'cate') {
    return {
      name: '所属分类',
      value
    }
  } else if (key === 'package') {
    return {
      name: '包装形式',
      value
    }
  } else if (key === 'sign') {
    return {
      name: '商品标志',
      value
    }
  } else if (key === 'isSugar') {
    return {
      name: '含糖量',
      value
    }
  }
})

const product = ref({})
//获取商品详情数据
onMounted(() => {
  // 获取商品详情数据
  getProductInfo()
  //将product.params转换为name,value的数组
})

const getProductInfo = async () => {
    const {data:{data,code}} = await axios.get(`/api/dmx/product/${route.params.id}`)
    if(code===200){
      console.log(data);
      product.value=data
      params.value= product.value.params
      paramsArr = Object.entries(params.value).map(([key, value]) => {
  if (key === 'date') {
    return {
      name: '生产日期',
      value
    }
  } else if (key === 'barnd') {
    return {
      name: '生产厂商',
      value
    }
  } else if (key === 'cate') {
    return {
      name: '所属分类',
      value
    }
  } else if (key === 'package') {
    return {
      name: '包装形式',
      value
    }
  } else if (key === 'sign') {
    return {
      name: '商品标志',
      value
    }
  } else if (key === 'isSugar') {
    return {
      name: '含糖量',
      value
    }
  }
})
    }
}


// 返回上个页面
const onClickLeft = () => {
  //返回时保存上个页面的状态
  router.go(-1)
}

// 商品图片
const images = ref([
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
])

// 跳转购物车
const goCart = () => {
  router.push('/cart')
  sessionStorage.setItem('active', '/cart') //存储当前底部菜单信息
}
// 加入购物车
const addCart1 = () => {
  // 获取商品信息

  //暂时添加一条假数据
  const goods = {
    id: +new Date(),
    name: 'Apple MacBook Pro 2021',
    oldPrice: 1999,
    newPrice: 1699,
    count: 1,
    imgUrl: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    checked: true
  }
  // 调用购物车方法

  //如果库存大于0 则添加
  // if (item.stock > 0) {
  //   // 添加到购物车
  // }
  try {
    addCart(goods)
    message.value = '添加购物车成功'
    show.value=true
  } catch (error) {
    message.value = '添加购物车失败'
    show.value=true
  }
}

//底部弹窗1
const showBottom1 = ref(false)
const showBottom2 = ref(false)



//根据多个详情图片制作一个详情长图
const imgArr = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg'
]

onMounted(() => {})

//选择商品规格
const categoryArr = ref([
  { id: 1, name: '规格1' },
  { id: 2, name: '预留规格' }
])
const select = ref('')
const num = ref(1)


//分享功能
const showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option: any) => {
  showToast(option.name);
  showShare.value = false;
};
//收藏功能
const isCollect = ref(false);
const collect = async () => {
  isCollect.value = !isCollect.value;
  // showToast(isCollect.value ? '收藏成功' : '取消收藏');
  //调用收藏接口
  // await collectApi({
  //   id: props.id,
  //   collect: isCollect.value,
  // });
};

</script>

<style lang="scss" scoped>
.details-view {
  background-color: #f5f5f5;
}
.swipe {
  width: 90%;
  margin: 5%;
  .swipe-image {
    width: 90%;
    margin: 5%;
  }
}
.details-info {
  width: 90%;
  margin: 5%;
  border-radius: 10px;
  background-color: rgb(253, 114, 75);
  .details-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: white;
    .details-price {
      span:nth-child(1) {
        font-size: 1.5rem;
      }
      span:nth-child(2) {
        text-decoration: line-through;
        font-size: 0.8rem;
        margin-left: 1rem;
      }
    }
    .details-name {
      span {
        font-size: 1rem;
        font-weight: bolder;
      }
    }
  }

  .details-bottom {
    border-radius: 10px;
    background-color: white;
    .details-title {
      padding: 5%;
      .details-title-text {
        padding: 2% 0 2% 0;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all; /* 防止长单词溢出容器 */
      }
      .details-line {
        display: flex;
        justify-content: space-between;
        span:nth-child(1) {
          color: gray;
        }
      }
    }
    .line {
      width: 90%;
      height: 0.5px;
      background-color: gray;
      margin: 0 5% 3% 5%;
    }
    .details-button {
      display: flex;
      justify-content: space-around;
      padding-bottom: 2%;
      .van-button{
        width: 30%;
      }

      .line-vertical {
        width: 0.5px;
        height: 20px;
        background-color: gray;
      }
    }
  }
}
.details-content-select {
  width: 96%;
  margin: 0 2%;

  .details-content-select-bottom {
    background-color: rgb(251, 251, 251);
    margin: 3% 4%;
    .details-content-select-bottom-top,
    .details-content-select-bottom-bottom {
      margin: 3% 0;
      span {
        margin: 3%;
      }
    }
  }
}
.details-content-img {
  width: 90%;
  margin: 5%;
  .details-content-img-top {
    width: 100%;
    height: 8%;
    .details-content-img-top-left {
      margin: 5% 0;
      width: 15%;
      text-align: right;
      font-size: 1rem;
      font-weight: 900;
      border-left: 2px solid rgb(181, 50, 50);
    }
  }
  .details-content-img-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    img {
      width: 100%;
      margin: 0;
      padding: 0;
    }
  }
}
.details-content-explain {
  width: 90%;
  margin: 5% 5% 10% 5%;
  .details-content-explain-top,
  .details-content-explain-center,
  .details-content-explain-bottom {
    color: gray;
    padding: 2% 0;
  }
}
.popup-bottom1{
  width: 90%;
  margin: 5%;
  .popup-bottom1-title{
    display: flex;
    align-items: center;
    img{
      margin-right: 5%;
    }
    span{
      color: rgb(181, 50, 50)
    }
  }
  .popup-bottom1-title-text{
    font-size: 1rem;
    margin: 5% 0;
  }
  .popup-bottom1-select{
    display: flex;
    justify-content: space-around;
    div{
      width: 40%;
      margin-right:5%;
      padding: 2% 5%;
      font-size: 1rem;
      text-align: center;
      background-color: rgb(247,247,247);
      border-radius: 10px;
    }
    .active{
      background-color: rgb(209, 251, 193);
      color:rgb(0,205,156);
      border-color: #4fc08d;
    }
  }
  .popup-bottom1-num{
    display: flex;
    justify-content: space-between;
  }
}

.popup-bottom2 {
  height: 100%;
  position: relative;
  .popup-bottom2-title {
    width: 100%;
    height: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popup-bottom2-item {
    width: 100%;
    padding: 3%;
    display: flex;
    justify-content: space-between;
    span:nth-child(1) {
      width: 30%;
      text-align: left;
    }
    span:nth-child(2) {
      width: 70%;
      text-align: left;
    }
  }
  .popup-bottom2-btn {
    width: 90%;
    margin: 0 5%;
    height: 8%;
    position: absolute;
    bottom: 3%;
  }
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
// :root {
//   --van-nav-bar-background: #4fc08d;
//   --van-nav-bar-title-text-color: white;
//   --van-nav-bar-icon-color: white;
//   --van-nav-bar-title-font-weight: normal;
// }
</style>
